<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>        
        <script type="text/javascript" src="ui/js/jquery/ui/jquery-ui-1.10.4.custom.js"></script>
        <link href="ui/css/jquery/ui/smoothness/jquery-ui-1.10.4.custom.css" rel="stylesheet" >
        <script src="ui/js/jquery/jquery.dataTables.js"></script>
        <script src="ui/js/jquery.alphanumeric.js"></script>
        <script src="ui/js/actividades.js"></script>
        
    <script>
        $(document).ready(function(){
                
        tabla();
        
        
        });
        
        function tabla(){
            // Setup - add a text input to each footer cell
        $('#actividades-dt tfoot th').each( function () {
            var title = $('#actividades-dt thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" size="12" placeholder="Search '+title+'" />' );
        } );
  
        var table = $('#actividades-dt').DataTable( {
                        dom: 'T<"clear">lfrtip',
                        processing: true,
                        serverSide: true,
                        "bDestroy": true,
                        "order": [[ 0, "desc" ]],
                        ajax: {
                            url: "/xmlc2/ListaActividadesServlet",
                            type: "POST"
                        },        
                        columns: [
                            { data: "id" },
                            { data: "actividad" },
                            { data: "fecha" },
                            { data: "tiempo" }, 
                            { data: "funcionario" } 
                        ]
                    } );

                        // Apply the filter
                    $("#actividades-dt tfoot input").on( 'keyup change', function () {
                        table
                            .column( $(this).parent().index()+':visible' )
                            .search( this.value )
                            .draw();
                    } );
        }
        
        
        
    </script>
        
        
    </head>
    <body>
        <div>     
           <legend style="font-size: 18px; color: #00356a; font-weight: bold">GESTI&Oacute;N DE ACTIVIDADES</legend>
            <button id="nuevo" class="large">Nuevo</button>       
            <div>&nbsp;</div> 
        
             <div class="example">
            <table class="table striped hovered dataTable" id="actividades-dt">
                <thead>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Actividad</th>
                    <th class="text-left">Fecha</th>
                    <th class="text-left">Tiempo</th>   
                    <th class="text-left">Funcionario</th>   
                </tr>
                </thead>

                <tbody>
                    <tr>
                        <td colspan="4" class="dataTables_empty">Loading data from server</td>
                    </tr>
                </tbody>

                <tfoot>
                <tr>
                    <th class="text-left">Id</th>
                    <th class="text-left">Actividad</th>
                    <th class="text-left">Fecha</th>
                    <th class="text-left">Tiempo</th>   
                    <th class="text-left">Funcionario</th>   
                </tr>
                </tfoot>
            </table>
            
        </div>

            
            
        </div>
        
        
            <div id="dlg_actividades" style="display: none" title="Actividades">      
                <form id="form_actividades" onsubmit="return false">
                    
                    <span>Este d&iacute;a llevas: </span>
                    <input style="font-size: 24px; color: green" id="acumulado" name="acumulado" type="text" size="3">
                    <span>Horas </span>
                    
                    <br>
                    <br>                    
                    
                    <table>
                        <tr>
                            <td>Fecha</td>
                            <td>
                                <div class="input-control text size2" id="fecini">
                                    <input id="fecha" type="text" name="fecha"  placeholder="Fecha" required />
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Tipo Actividad</td>
                            <td>
                                <div class="input-control select size4" data-role="input-control">
                                    <select id="tactividad" name="tactividad" placeholder="Tipo de Actividad" required></select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top">Descripci&oacute;n</td>
                            <td>                                
                                    <textarea rows="6" cols="32" id="descripcion" name="descripcion"></textarea>    
                            </td>
                        </tr>
                        <tr>
                            <td>Tiempo</td>
                            <td>
                                <div class="input-control text size2" data-role="input-control">
                                    <input onkeyup="this.value = this.value.toUpperCase();" id="tiempo" name="tiempo" type="text" placeholder="Tiempo" required>
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>&Aacute;rea</td>
                            <td>
                                <div class="input-control select size4" data-role="input-control">
                                    <select id="area" name="area" placeholder="Area" required></select>
                                </div> 
                            </td>
                        </tr>
                        <tr>
                            <td>Proyecto</td>
                            <td>
                                <div class="input-control select size4" data-role="input-control">
                                    <select id="proyecto" name="proyecto" placeholder="Proyecto" required></select>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>Ticket</td>
                            <td>
                                <div class="input-control text size2" data-role="input-control">
                                    <input onkeyup="this.value = this.value.toUpperCase();" id="ticket" name="ticket" type="text" placeholder="Ticket" required>
                                    <button class="btn-clear"></button>
                                </div>
                            </td>
                        </tr>
                        
                    </table>                            
               
                    
                    <input type="hidden" name="motivoextra1" id="motivoextra1"/> 
                    <input type="hidden" name="sevenet1" id="sevenet1"/> 
                    <input type="hidden" name="obsextra1" id="obsextra1"/> 
                    
                
                <input type="submit" id="enviar" style="display: none" value="Guardar" />
                
                
                
                </form>
            </div>
                        
            <div id="dlg_extra" style="display: none" title="Actividades Extra">
                
                    <table>
                        <tr>
                            <td>Motivo Extra</td>
                            <td>
                                <select id="motivoextra" name="motivoextra" placeholder="Motivo Extra"></select>
                            </td>
                        </tr>
                        <tr>
                            <td>Sevenet</td>
                            <td>
                                <input id="sevenet" name="sevenet" type="text" placeholder="Consecutivo Sevenet">
                            </td>
                        </tr>
                        <tr>
                            <td style="vertical-align: top">Justificaci&oacute;n</td>
                            <td>                                
                                    <textarea rows="5" cols="20" id="obsextra" name="obsextra"></textarea>    
                            </td>
                        </tr>
                    </table>                

            </div>  
        
        
                
            
        
        
        
        
    </body>
</html>
